<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>笔记后台管理</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="笔记后台管理">
<meta name="description" content="笔记后台管理">
<meta name="author" content="笔记后台管理">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<script src="js/comment.js"></script>
<script src="js/jscommon.js"></script>
<style>
    .blog-pagnation-wrapper{
        height: 40px;
        margin: 16px 0;
        text-align: center;
    }
</style>
<style>
  .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .search-container {
      display: flex;
  }
  .search-container input {
      flex: 1; /* 占据剩余空间 */
  }
  .search-container button {
      margin-left: 10px; /* 按钮之间的间隔 */
  }
  td {
    text-align: center;
    vertical-align: middle;
  }
  th {
    text-align: center;
    vertical-align: middle;
  }
</style>
</head>
  
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">
      
      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
      </div>
      <div class="lyear-layout-sidebar-scroll"> 
        
        <nav class="sidebar-main">
          <ul class="nav nav-drawer">
            <li class="nav-item nav-item-has-subnav">
              <a href="manager.html"><i class="mdi mdi-palette"></i> 用户管理</a>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="manager_note.html"><i class="mdi mdi-format-align-justify"></i>笔记管理</a>
            </li>
          </ul>
        </nav>
      </div>
      
    </aside>
    <!--End 左侧导航-->
    
    <!--头部信息-->
    <header class="lyear-layout-header">
      
      <nav class="navbar navbar-default">
        <div class="topbar">
          
          <div class="topbar-left">
            <div class="lyear-aside-toggler">
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
            </div>
            <span class="navbar-page-title"> 后台首页 </span>
          </div>
          
          <ul class="topbar-right">
            <li class="dropdown dropdown-profile">
              <a href="javascript:void(0)" data-toggle="dropdown">
                <span>后台管理<span class="caret"></span></span>
              </a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li class="divider"></li>
                <li> <a href="javascript:logout()"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
              </ul>
            </li>
            <!--切换主题配色-->
		    <li class="dropdown dropdown-skin">
			  <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
			  <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
                <li class="drop-title"><p>主题</p></li>
                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                    <label for="site_theme_1"></label>
                  </span>
                  <span>
                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                    <label for="site_theme_2"></label>
                  </span>
                  <span>
                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                    <label for="site_theme_3"></label>
                  </span>
                </li>
			    <li class="drop-title"><p>LOGO</p></li>
				<li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                    <label for="logo_bg_1"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                    <label for="logo_bg_2"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                    <label for="logo_bg_3"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                    <label for="logo_bg_4"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                    <label for="logo_bg_5"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                    <label for="logo_bg_6"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                    <label for="logo_bg_7"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                    <label for="logo_bg_8"></label>
                  </span>
				</li>
				<li class="drop-title"><p>头部</p></li>
				<li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                    <label for="header_bg_1"></label>                      
                  </span>                                                    
                  <span>                                                     
                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                    <label for="header_bg_2"></label>                      
                  </span>                                                    
                  <span>                                                     
                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                    <label for="header_bg_3"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                    <label for="header_bg_4"></label>                      
                  </span>                                                    
                  <span>                                                     
                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                    <label for="header_bg_5"></label>                      
                  </span>                                                    
                  <span>                                                     
                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                    <label for="header_bg_6"></label>                      
                  </span>                                                    
                  <span>                                                     
                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                    <label for="header_bg_7"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                    <label for="header_bg_8"></label>
                  </span>
				</li>
				<li class="drop-title"><p>侧边栏</p></li>
				<li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                    <label for="sidebar_bg_1"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                    <label for="sidebar_bg_2"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                    <label for="sidebar_bg_3"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                    <label for="sidebar_bg_4"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                    <label for="sidebar_bg_5"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                    <label for="sidebar_bg_6"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                    <label for="sidebar_bg_7"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                    <label for="sidebar_bg_8"></label>
                  </span>
				</li>
			  </ul>
			</li>
            <!--切换主题配色-->
          </ul>
          
        </div>
      </nav>
      
    </header>
    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid">
        
        <div class="row">
          <div class="col-sm-6 col-lg-3">
            <div class="card bg-danger">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">用户总数</p>
                  <p class="h3 text-white m-b-0 fa-1-5x"></p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-account fa-1-5x"></i></span> </div>
              </div>
            </div>
          </div>

          <div class="col-sm-6 col-lg-3">
            <div class="card bg-primary">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">笔记总数</p>
                  <p class="h3 text-white m-b-0 fa-1-5x"></p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-book-open"></i></span> </div>
              </div>
            </div>
          </div>
          
          <div class="col-sm-6 col-lg-3">
            <div class="card bg-success">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">浏览次数</p>
                  <p class="h3 text-white m-b-0 fa-1-5x"></p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-eye"></i></span> </div>
              </div>
            </div>
          </div>
          
          <div class="col-sm-6 col-lg-3">
            <div class="card bg-purple">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">评论总数</p>
                  <p class="h3 text-white m-b-0 fa-1-5x"></p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="row">
          
          <div class="col-lg-12">
            <div class="card">
              <div class="card-header">
                <h4>用户管理</h4>
                <div class="search-container">
                  <input type="text" id="searchInput" placeholder="搜索...">
                  <a href="javascript:select()" id="searchButton">搜索</a>
                </div>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover">
                    <thead>
                      <tr>
                        <th>id</th>
                        <th>用户名</th>
                        <th>笔记数</th>
                        <th>笔记浏览量</th>
                        <th>状态</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="blog-pagnation-wrapper" class="container-right">
                <button class="blog-pagnation-item" onclick="goFirstPage()">首页</button> 
                <button class="blog-pagnation-item" onclick="goBeforePage()">上一页</button>  
                <button class="blog-pagnation-item" onclick="goNextPage()">下一页</button>
                <button class="blog-pagnation-item" onclick="goLastPage()">末页</button>
            </div>
            </div>
          </div>
          
        </div>
        
      </div>
      
    </main>
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>


<!--图表插件-->
<script type="text/javascript" src="js/Chart.js"></script>
<script>
        // 校验管理员身份
        userconfirm();
        // 用户总数
        var userCount = document.querySelector('.bg-danger .h3.text-white.m-b-0.fa-1-5x');
        // 笔记总数
        var noteCount = document.querySelector('.bg-primary .h3.text-white.m-b-0.fa-1-5x');
        // 阅读总数
        var readCount = document.querySelector('.bg-success .h3.text-white.m-b-0.fa-1-5x');
        // 评论总数
        var commentCount = document.querySelector('.bg-purple .h3.text-white.m-b-0.fa-1-5x');
        // 获取用户，笔记，浏览，评论信息
        getCount(userCount, noteCount, readCount, commentCount);
  
        // 1. 设置当前页码
        var page = 1;
        // 每页固定10篇
        var size = 10;
        // 3. 定义全局页数
        var pageCount = 0;

        function getUserList(page) {
          // 获取用户输入的文本
          var query = $('#searchInput').val();
          jQuery.ajax({
            "url": "/user/userinfo",
            "type": "POST",
            "data": { "page": page, "size": size, "text": query },
            success: function(result) {
              if(result != null && result.code == 200 && result.data.list.length > 0) {
                // 正常查询结果返回
                // 设置总页数
                pageCount = result.data.pageCount;
                // 清空现有数据
                $('tbody').empty();
                
                // 遍历数据，创建列表项并添加到页面
                result.data.list.forEach(function(item) {
                    var userState = item.state == 1 ? "生效" : "未生效";
                    var row = $('<tr>').appendTo('tbody');
                    row.append('<td>' + item.id + '</td>');
                    row.append('<td>' + item.username + '</td>');
                    row.append('<td>' + item.artCount + '</td>');
                    row.append('<td>' + item.artReadCount + '</td>');
                    row.append('<td>' + userState + '</td>');
                    row.append('<td>' + '<button class="status-change">状态更改</button>' + '</td>'); // 您可以在这里添加操作按钮或其他内容
                });
              }
            }
          });
        }
        getUserList(page);

        function select() {
          // 获取用户输入的文本
          var query = $("#searchInput").val();
          // 从第一页查起
          page = 1;
          // 验证输入是否有效（例如，至少输入一个字符）
          if (query.trim() === '') {
              alert('请输入查询内容！');
              return;
          }
          jQuery.ajax({
              url: "/user/userinfo",
              type: "POST",
              data: {"page": page, "size": size, "text": query},
              success: function(result) {
                  if(result != null && result.code == 200 && result.data.list.length > 0) {
                      // 正常查询结果返回
                      // 设置总页数
                      pageCount = result.data.pageCount;
                      // 清空现有数据
                      $('tbody').empty();
                      
                      // 遍历数据，创建列表项并添加到页面
                      result.data.list.forEach(function(item) {
                          var userState = item.state == 1 ? "生效" : "未生效";
                          var row = $('<tr>').appendTo('tbody');
                          row.append('<td>' + item.id + '</td>');
                          row.append('<td>' + item.username + '</td>');
                          row.append('<td>' + item.artCount + '</td>');
                          row.append('<td>' + item.artReadCount + '</td>');
                          row.append('<td>' + userState + '</td>');
                          row.append('<td>' + '<button class="status-change">状态更改</button>' + '</td>'); // 您可以在这里添加操作按钮或其他内容
                      });
                  }
              }
          })
        }

        $('body').on('click', '.status-change', function() {
          // 获取当前行的 id
          var id = $(this).closest('tr').find('td:first').text();
          // 设置状态更改后的内容
          // 注意：这两行代码不能写到ajax请求里，否则获取不到
          var currentStateCell = $(this).closest('tr').find('td:eq(4)');
          var currentStateText = currentStateCell.text() == "生效" ? "未生效" : "生效";
          // 发送 AJAX 请求来更改状态
          $.ajax({
              url: 'user/changestate', // 更改状态的 URL
              type: 'POST',
              data: { "id": id },
              success: function(response) {
                  // 假设服务器返回了更改状态的成功响应
                  if (response != null && response.code == 200) {
                      // 将状态改为另一种
                      // 获取当前行的状态值
                      currentStateCell.text(currentStateText);
                      console.log(currentStateText);
                  } else {
                      // 显示错误消息
                      alert('状态更改失败，请重试！');
                  }
              },
              error: function(xhr, status, error) {
                  // 显示错误消息
                  alert('发生错误：' + error);
              }
          });
      });

        function goFirstPage() {
            if(page <= 1) {
                alert("当前已经在首页！");
                return;
            }
            page = 1;
            getUserList(1);
        }

        // 转到上一页
        function goBeforePage() {
            if(page <= 1) {
                alert("当前已经在首页！");
                return;
            }
            page = parseInt(page) - 1;
            getUserList(page);
        }

        // 转到下一页
        function goNextPage() {
            if(page >= pageCount) {
                alert("已经是最后一页！");
                return;
            }
            page = parseInt(page) + 1;
            getUserList(page);
        }

        // 转到最后一页
        function goLastPage() {
            if(page >= pageCount) {
                alert("已经是最后一页！");
                return;
            }
            page = pageCount;
            getUserList(pageCount);
        }
</script>
</body>
</html>